import {trigger, animate, style, group, query, transition} from '@angular/animations';

/* trigger: 触发器，和DOM交互，决定什么时候触发动画 */
export const SlideIn = trigger('SlideIn', [


  transition('void <=> *', [
    /* query: 寻找指定的子层进行动画  进场*/
    query(':enter', [
      style({transform: 'translateX(-100%)'}),
      animate('.4s linear',
        style({opacity: 1, transform: 'translateX(0%)'}))
    ], {optional: true}),

    query(':leave', [
      style({transform: 'translateX(0%)'}),
      animate('.4s linear',
        style({opacity: 0, transform: 'translateX(0%)'}))
    ], {optional: true})
  ]),


  // 任意页面之间跳转的动画
  transition('* <=> *', [
    /*group: 多个动画组合起来并发执行 */
    group([

      /* query: 寻找指定的子层进行动画  进场*/
      query(':enter', [
        style({transform: 'translateX(100%)'}),
        animate('0.3s linear',
          style({opacity: 1, transform: 'translateX(0%)'}))
      ], {optional: true}),

      /* ease-in-out  linear  出场*/
      query(':leave', [
        style({display: 'none', transform: 'translateX(-100%)'}),
        animate('0.3s linear',
          style({opacity: 0, transform: 'translateX(-100%)'}))
      ], {optional: true}),
    ])
  ])


]);

